<!-- AddCustomer -->
<template>
  <div class="app-container">
    <div>添加客户</div>
    <el-form ref="form" :model="form" class="el_form_box" label-width="100px">
      <el-form-item label="客户姓名">
        <el-input v-model="form.name" placeholder="客户姓名"></el-input>
      </el-form-item>
      <el-form-item label="客户电话">
        <el-input v-model="form.mobile" placeholder="请输入客户有效手机号码"></el-input>
      </el-form-item>
      <el-form-item label="客户渠道">
        <el-select v-model="form.channel" clearable placeholder="请选择">
          <el-option v-for="item in channelList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="媒体">
        <el-select v-model="form.media" clearable placeholder="请选择">
          <el-option v-for="item in mediaList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="城市">
        <!-- <el-select v-model="form.city" clearable placeholder="请选择">
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select> -->
        <city-select v-model="form.city"></city-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" clearable placeholder="性别">
          <el-option label="男" :value="1" />
          <el-option label="女" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age" placeholder="年龄"></el-input>
      </el-form-item>
      <!-- <el-form-item label="星级">
        <el-select v-model="form.level" clearable placeholder="星级">
          <el-option v-for="item in startOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="状态">
        <el-select v-model="form.fit" clearable>
          <el-option v-for="item in effectiveOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="通话状态">
        <el-select v-model="form.call" clearable placeholder="通话状态">
          <el-option v-for="item in passOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="需求">
        <el-input v-model="form.need" placeholder="请输入需求金额"></el-input>
      </el-form-item>
      <el-form-item label="进度">
        <el-select v-model="form.progress" clearable placeholder="跟进状态">
          <el-option v-for="item in statusList" :key="item.status" :label="item.desc" :value="item.status" />
        </el-select>
      </el-form-item>

      <el-form-item v-for="(item,index) in fieldList" :key="index" :label="item.fieldName">
        <el-input v-model="form.name" :placeholder="item.fieldName" v-if="item.type ===1"></el-input>
        <el-select v-model="item.value1" clearable :placeholder="item.fieldName" v-else>
          <el-option v-for="item in item.value" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <!-- <div v-for="(item,index) in fieldList" :key="index">
        <el-form-item :label="item.fieldName">
          <div v-if="item.type===1">
            <el-input v-model="form.name" :placeholder="item.fieldName"></el-input>
          </div>
          <div v-else>
            <el-select v-model="item.value1" clearable :placeholder="item.fieldName">
              <el-option v-for="item in item.value" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
        </el-form-item>
      </div> -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { followUpOptions, startOptions, effectiveOptions } from "./config";
import { mapState } from "vuex";
import { getAllChannelList, media } from "@/api/channel/index";
import { addCustomer, GETCUSTOMERSTATUS } from "@/api/customer";
import CitySelect from '@/components/city'
export default {
  components: {
    CitySelect
  },
  data() {
    return {
      form: {
        name: "",
        mobile: "",
        channel: "",
        media: "",
        sex: 1,
        age: "",
        level: "",
        call: "",
        need: "",
        progress: "",
        city:''
      },
      followUpOptions,
      startOptions,
      passOptions: [
        {
          label: "初始",
          value: 0,
        },
        {
          label: "未接",
          value: 1,
        },
        {
          label: "关机",
          value: 2,
        },
        {
          label: "拒接",
          value: 3,
        },
        {
          label: "通话中",
          value: 4,
        },
        {
          label: "外地",
          value: 5,
        },
        {
          label: "已接通",
          value: 6,
        },
        {
          label: "空号",
          value: 7,
        },
      ],
      effectiveOptions,
      channelList: [],
      loading: false,
      mediaList: [],
      fieldList: [],
      statusList: [],
    };
  },
  computed: {
    ...mapState({
      fieldList1: (state) => state.myClient.fieldList,
      cityList: (state) => state.app.cityList,
    }),
  },
  methods: {
    async getMediaList() {
      const res = await media();
      if (!res.result) return;
      this.mediaList = res.data.map((item) => {
        return {
          value: item,
          label: item,
        };
      });
    },
    async getAllChannelList() {
      const res = await getAllChannelList();
      if (!res.result) return;
      this.channelList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.nickname,
        };
      });
    },
    formatParams() {
      this.fieldList.forEach((element, index) => {
        this.form["field" + (index + 1)] = element.value1;
      });
    },
    async onSubmit() {
      try {
        this.loading = true;
        this.formatParams();
        const res = await addCustomer(this.form);
        this.loading = false;
        if (!res.result) return;
        this.$message({
          message: res.message,
          type: "success",
        });
        this.$router.back();
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },

    // 获取状态
    getStatus() {
      GETCUSTOMERSTATUS().then((res) => {
        this.statusList = res.data || [];
      });
    },
  },
  created() {},
  async mounted() {
    this.fieldList = JSON.parse(JSON.stringify(this.fieldList1));
    this.getAllChannelList();
    this.getMediaList();
    this.getStatus();
  },
  watch: {
    fieldList1(val) {
      this.fieldList = JSON.parse(JSON.stringify(val));
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.el_form_box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  .el-form-item {
    flex: 0 0 50%;
    padding-right: 60px;
    .el-select {
      width: 100%;
    }
  }
}
</style>
